<template>
	<view class="mall">
		<indexHeader title="云上商城" color="#2a7a5a"></indexHeader>
		<view class="mall-bg">
			<image src="../../../static/bg/mall-bg.jpg" mode=""></image>
		</view>
		<view class="mall-sub-title">
			<text>热卖爆品，火热感恩</text>
			<view class="hr">
				<view class="greenline">
				</view>
				<view class="greenline">
				</view>
			</view>
		</view>
		<view class="mall-little-title">
			<text>美味带回家</text>
		</view>
		<view class="new-list">
			<view class="new-list-item">
				<view class="item-tag">
					新品热卖
				</view>
				<view class="item-image">
					<image src="../../../static/uploadfiles/shaobing.jpg" mode=""></image>
				</view>
				<view class="item-title">黄山烧饼</view>
				<view class="item-des">
					酥脆美味
				</view>
				<view class="item-price">
					￥<text>26</text>起
				</view>
				<view class="item-button">
					立即购买
				</view>
			</view>
			<view class="new-list-item">
				<view class="item-tag">
					新品热卖
				</view>
				<view class="item-image">
					<image src="../../../static/uploadfiles/niurou.jpg" mode=""></image>
				</view>
				<view class="item-title">平遥牛肉</view>
				<view class="item-des">
					正宗手切牛肉
				</view>
				<view class="item-price">
					￥<text>48</text>起
				</view>
				<view class="item-button">
					立即购买
				</view>
			</view>
		</view>
		<view class="item-card">
			<view class="item-card-tag">
				限量特供
			</view>
			<view class="item-card-image">
				<image src="../../../static/uploadfiles/guihuagao.jpg" mode="aspectFill"></image>
			</view>
			<view class="item-card-info">
				<view class="item-card-info-text">
					<view class="title">
						杭州老字号桂花糕
					</view>
					<view class="des">
						4小盒礼盒装
					</view>
				</view>
				<view class="item-card-info-price">
					<view class="price">
						<text>起</text><text>26</text><text>￥</text>
					</view>
					<view class="button">
						<view class="button-item">
							立即购买
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="item-card">
			<view class="item-card-tag">
				今日热卖
			</view>
			<view class="item-card-discount">
				<text>
					立减
				</text>
				<text>
					100元
				</text>
			</view>
			<view class="item-card-image">
				<image src="../../../static/uploadfiles/damizao.jpg" mode="aspectFill"></image>
			</view>
			<view class="item-card-info">
				<view class="item-card-info-text">
					<view class="title">
						山东蜜枣
					</view>
					<view class="des">
						特甜国供高密枣
					</view>
				</view>
				<view class="item-card-info-price">
					<view class="price">
						 <view class="price-origin">
						 	<text>￥</text><text>210</text>
						 </view>
						 <view class="price-now">
						 	<text>￥</text><text>110</text>
						 </view>
					</view>
					<view class="button">
						<view class="button-item">
							立即购买
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mall-article">
			<image src="../../../static/uploadfiles/ad1.png"></image>
		</view>
		<view class="mall-welfare">
			<view class="text">
				<text>附加福利，</text>
				<text>住店送福利</text>
				<view class="button">
					领取福利
				</view>
				<view class="button">
					挑选特产
				</view>
			</view>
			<view class="pics">
				<image src="../../../static/images/welfare.png"></image>
			</view>
		</view>
		<view class="item-card">
			<view class="item-card-image">
				<image src="../../../static/uploadfiles/shenzi.jpeg" mode="aspectFill"></image>
			</view>
			<view class="item-card-info">
				<view class="item-card-info-text">
					<view class="title">
						手工编织手链
					</view>
					<view class="des">
						定情手链，爱她就守护她
					</view>
				</view>
				<view class="item-card-info-price">
					<view class="price">
						 <text>起</text><text>60</text><text>￥</text>
					</view>
					<view class="button">
						<view class="button-item">
							立即购买
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mall-footer">
			<view class="hr">
				<view class="greenline">
				</view>
			</view>
			<view class="text">
				美好如期而至
			</view>
			<view class="hr">
				<view class="greenline">
				</view>
			</view>
		</view>
		<view class="mall-fakefooter">
			
		</view>
		<cart-bar></cart-bar>
	</view>
</template>

<script>
	import indexHeader from '../../../components/indexHeader.vue'
	import cartBar from '../../../components/cartBar.vue'
	export default {
		components: {
			indexHeader,
			cartBar
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
.mall {
	background-color: #e5e5e5;
}
.mall-bg {
	width: 100%;
	height: 750rpx;
	&>image {
		width: 100%;
		height: 100%;
	}
}
.mall-sub-title {
	margin-top: 20rpx;
	font-size: 40rpx;
	font-weight: bold;
	text-align: center;
	&>text {
		color: #012816;
	}
	
	&>.hr {
		margin: 10rpx auto 0;
		width: 500rpx;
		height: 4rpx;
		display: flex;
		justify-content: space-between;
		&>.greenline {
			width: 160rpx;
			height: 4rpx;
			background-color: #2c8066;
		}
	}
}
.mall-little-title {
	margin-top: 10rpx;
	text-align: center;
	font-size: 30rpx;
	color: #1f8f5d;
}
.new-list {
	width: 720rpx;
	height: 550rpx;
	margin: 20rpx auto 0;
	display: flex;
	justify-content: space-between;
	&-item {
		background-color: #fff;
		width: 350rpx;
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
		border-bottom-right-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
		&>.item-tag {
			width: 150rpx;
			background-color: #2c8066;
			color: #fff;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			font-size: 30rpx;
			position: absolute;
			left: 0;
			top: 0;
		}
		&>.item-image {
			width: 100%;
			height: 250rpx;
			overflow: hidden;
			&>image {
				width: 100%;
				margin-top: -100rpx;
			}
		}
		&>.item-title {
			font-size: 40rpx;
			font-weight: bold;
			text-align: center;
		}
		&>.item-des {
			font-size: 30rpx;
			color: #505050;
			text-align: center;
		}
		&>.item-price {
			text-align: center;
			color:#f5574e;
			font-size: 30rpx;
			&>text {
				font-size: 40rpx;
				font-weight: bold;
			}
		}
		&>.item-button {
			flex-grow: 1;
			max-height: 60rpx;
			width: 200rpx;
			background-color: #2c8066;
			color: #fff;
			margin: 10rpx auto 30rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 30rpx;
			line-height: 60rpx;
		}
	}
}
.item-card {
	width: 720rpx;
	height: 720rpx;
	background-color: #fff;
	margin: 20rpx auto 0;
	border-bottom-right-radius: 40rpx;
	border-bottom-left-radius: 40rpx;
	position: relative;
	&-tag {
		width: 150rpx;
		background-color: #2c8066;
		color: #fff;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 30rpx;
		position: absolute;
		left: 0;
		top: 0;
	}
	&-discount {
		width: 120rpx;
		height: 120rpx;
		background-color: #2c8066;
		position: absolute;
		right: 20rpx;
		top: 380rpx;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		&>text {
			color: #fff;
			font-weight: bold;
			text-align: center;
			font-size: 30rpx;
		}
	}
	&-image {
		width: 720rpx;
		height: 550rpx;
		overflow: hidden;
		&>image {
			width: 100%;
			height: 100%;
		}
	}
	&-info {
		display: flex;
		flex-grow: 1;
		justify-content: space-between;
		padding:20rpx 40rpx 30rpx;
		&-text {
			display: flex;
			flex-direction: column;
			&>.title {
				font-size: 40rpx;
				font-weight: bold;
				color: #505050;
			}
			&>.des {
				font-size: 26rpx;
				color:#505050;
				margin-top: 10rpx;
			}
		}
		&-price {
			min-width: 30%;
			text-align: right;
			display: flex;
			flex-direction: column;
			.price {
				display: flex;
				flex-direction: row-reverse;
				&>text {
					color: #f5574e;
					font-size: 30rpx;
					font-weight: bold;
					margin: 0 10rpx;
				}
				&>text:first-child {
					font-size: 24rpx;
					line-height: 44rpx;
				}
				&>text:last-child {
					font-size: 26rpx;
				}
				&-now {
					color: #f5574e;
					font-size: 30rpx;
					font-weight: bold;
					&>text{
						margin-right: 10rpx;
					}
				}
				&-origin {
					color: #808080;
					font-size: 20rpx;
					&>text {
						line-height: 40rpx;
						text-decoration:line-through;
						vertical-align: bottom;
					}
				}
			}
			.button {
				width: 100%;
				&-item {
					height: 60rpx;
					width: 200rpx;
					background-color: #2c8066;
					color: #fff;
					margin-top: 20rpx;
					float: right;
					text-align: center;
					line-height: 80rpx;
					font-size: 30rpx;
					line-height: 60rpx;
				}
			}
		}
	}
}
.mall-article {
	width: 720rpx;
	height: 200rpx;
	margin: 20rpx auto;
	overflow: hidden;
	&>image {
		width: 100%;
		height: 100%;
	}
}
.mall-welfare {
	width: 720rpx;
	height: 400rpx;
	margin: 0 auto;
	background-color: #2c8066;
	display: flex;
	justify-content: center;
	.text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		&>text {
			font-size: 30rpx;
			font-weight: bold;
			color: #fff;
		}
		.button {
			width: 150rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			font-size: 30rpx;
			font-weight: bold;
			color: #012816;
			background-color: #fff2ef;
			margin: 10rpx 0;
		}
	}
	.pics {
		width: 300rpx;
		height: 200rpx;
		padding-top: 100rpx;
		padding-left: 100rpx;
		&>image {
			width: 100%;
			height: 100%;
		}
	}
}
.mall-footer {
	width: 100%;
	height: 50rpx;
	margin-top: 80rpx;
	display: flex;
	justify-content: center;
	.hr {
		width: 150rpx;
		height: 50rpx;
		.greenline {
			width: 100%;
			height: 1px;
			margin-top: 22rpx;
			background-color: rgba(1,40,22,.47);
		}
	}
	.hr:first-child {
		margin-right: 40rpx;
	}
	.hr:last-child {
		margin-left: 40rpx;
	}
	.text {
		height: 50rpx;
		color: #83998f;
		font-size: 30rpx;
	}
}
.mall-fakefooter {
	width: 100%;
	height: 250rpx;
}
</style>
